<template>
  <el-tabs v-model="activeName" @tab-click="handleClick" class="task-tabs">
    <el-tab-pane label="我的任务" name="myTask">
      <template #label>
        <div class="tab-label">
          <el-icon><User /></el-icon>
          <span>我的任务</span>
        </div>
      </template>
      <MyTask />
    </el-tab-pane>

    <el-tab-pane label="组任务" name="GroupTask">
      <template #label>
        <div class="tab-label">
          <el-icon><UserFilled /></el-icon>
          <span>组任务</span>
        </div>
      </template>
      <GroupTask />
    </el-tab-pane>

    <el-tab-pane label="历史任务" name="historicalTask">
      <template #label>
        <div class="tab-label">
          <el-icon><Clock /></el-icon>
          <span>历史任务</span>
        </div>
      </template>
      <HistoricalTask />
    </el-tab-pane>
  </el-tabs>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { User, UserFilled, Clock } from '@element-plus/icons-vue'
import MyTask from '@/views/system/personal/task/MyTask.vue'
import GroupTask from '@/views/system/personal/task/GroupTask.vue'
import HistoricalTask from '@/views/system/personal/task/HistoricalTask.vue'

const activeName = ref('myTask')
const handleClick = () => {}
</script>

<style scoped lang="less">

.tab-label {
  display: flex;
  align-items: center;
  gap: 8px;

  .el-icon {
    font-size: 18px;
  }
}

// 响应式设计
@media (max-width: 768px) {
  .task-container {
    padding: 16px;
  }

  .task-header {
    .task-title {
      font-size: 24px;
    }

    .task-subtitle {
      font-size: 14px;
    }
  }

  .task-tabs {
    :deep(.el-tabs__header) {
      .el-tabs__nav-wrap {
        padding: 0 16px;
      }

      .el-tabs__item {
        height: 50px;
        line-height: 50px;
        font-size: 14px;
      }
    }

    :deep(.el-tabs__content) {
      padding: 16px;
    }
  }
}
</style>
